<template>
  <div v-if="setpro">
    <roofVue title="商品详情"></roofVue>
    <!--  轮播 indicator-color="white"-->
    <van-swipe :autoplay="3000" @change="onChange" v-if="setimages.length > 0">
      <van-swipe-item v-for="(i, index) in setimages" :key="index">
        <img style="width: 100%; height: 70vw" :src="imgurl + i" alt />
      </van-swipe-item>
      <template #indicator>
        <div class="custom-indicator">{{ current + 1 }}/{{ setimages.length }}</div>
      </template>
    </van-swipe>
    <div v-else style="padding: 1rem">
      <van-image style="width: 100%" :src="imgurl + setpro.defaultImg" fit="contain" />
    </div>
    <van-cell-group inset>
      <van-cell>
        <template #title>
          <span style="font-size: 28px; color: orange">￥{{ setpro.shopPrice / 100 }}</span>
        </template>
        <div class="top">
          <div>
            <span>31</span>
            <br />
            <span>浏览</span>
          </div>
          <div>
            <span>11</span>
            <br />
            <span>销量</span>
          </div>
        </div>
      </van-cell>
      <van-cell :title="setpro.name"></van-cell>
    </van-cell-group>
    <van-cell-group inset style="margin: 0.5rem">
      <van-cell title="选择规格" is-link @click="show = true" />
    </van-cell-group>

    <!-- 商品规格 -->
    <van-sku
      v-model="show"
      :sku="sku"
      :goods="goods"
      :goods-id="productId"
      :quota="quota"
      :quota-used="quotaUsed"
      :hide-stock="sku.hide_stock"
      @buy-clicked="onBuyClicked"
      @add-cart="onAddCartClicked"
    />

    <!-- 图文详情 -->
    <div style="padding: 0.5rem">
      <van-panel title="图文详情">
        <div>
          <span v-html="setpro.explain"></span>
          <van-image style="width: 100%" :src="imgurl + setpro.defaultImg" fit="contain" />
        </div>
      </van-panel>
    </div>
    <!-- 评论 -->
    <div>
      <span></span>
    </div>

    <van-goods-action>
      <van-goods-action-icon icon="cart-o" text="购物车" @click="$router.push('/cart')"/>
      <van-goods-action-icon
        icon="star-o"
        text="收藏"
        color="#ff5000"
        @click="shouchang"
        v-if="shoubool"
      />
      <van-goods-action-icon
        icon="star"
        text="已收藏"
        color="#ff5000"
        @click="
          $dialog.alert({
            message: '已经收藏过了',
            theme: 'round-button',
          })
        "
        v-else
      />
      <van-goods-action-button type="warning" text="加入购物车" @click="show = true" />
      <van-goods-action-button type="danger" text="立即购买" @click="show = true" />
    </van-goods-action>
  </div>
</template>

<script>
import roofVue from "../other/roof.vue";
export default {
  data() {
    return {
      productId: 0,
      current: 0,
      setimages: [],
      setpro: null,
      show: false,
      sku: {
        hide_stock: false, // 是否隐藏剩余库存
        price: "1.00", // 默认价格（单位元）
        stock_num: 227, // 商品总库存
        collection_id: 2261, // 无规格商品 skuId 取 collection_id，否则取所选 sku 组合对应的 id
        none_sku: false, // 是否无规格商品
        tree: [],
        list: []
      },
      goods: {
        picture: "",
      },
      quota: 100,
      quotaUsed: 10,
      shoubool: true,
    };
  },
  components: {
    roofVue,
  },
  created() {
    this.productId = this.Sto.Session.get("productId");
    console.log(this.productId);
    this.getpro();
    this.getlist();
    this.get();
    this.getguige()
    this.getzuji()
  },
  methods: {
    onChange(index) {
      this.current = index;
    },
    // 获取商品图片和详情
    async getpro() {
      let res = await this.$post(
        this.url + "product/get_images/" + this.productId
      );
      console.log(res);
      if (res.errorCode == "0" && res.data) {
        this.setimages = res.data.images;
        // console.log(this.setimages);
      }
    },
    // 商品详情
    getlist() {
      // catalog/product/details
      this.$post(this.url2 + "/product/detail", {
        id: parseInt(this.productId),
      }).then((res) => {
        console.log(res);
        if (res.errorCode == "0") {
          this.setpro = res.data;
          this.sku.price = res.data.shopPrice / 100;
          this.sku.stock_num = res.data.quantity;
          this.goods.picture = this.imgurl + res.data.defaultImg;
          res.data.skuList.map(nus => {
            nus.s1 = nus.optionValueKeyGroup.split("_")[0]
            nus.s2 = nus.optionValueKeyGroup.split("_")[1]
            nus.stock_num = nus.quantity
            delete nus.quantity
            delete nus.optionValueKeyGroup
            this.sku.list.push(nus)
          })
          console.log(this.sku.list);

        }
      });
    },
    async get() {
      let res2 = await this.$post(this.url + "user/wishlist", {
        userId: this.$store.state.user.id,
      });
      if (res2.errorCode == "0") {
        res2.data.wishlist.map((nus) => {
          if (nus.product.id == this.productId) {
            this.shoubool = false;
          }
        });
      }
    },

    // 请求规格
    getguige() {
      // catalog/product/option/details
      this.$post(this.url2 + "/sku/option", {
        productId: this.productId,
      }).then((res) => {
        console.log(res);
        if (res.errorCode == "0") {
          let i = 1
          res.data.map((nus) => {
            nus.k = nus.name
            nus.k_s = "s" + i++
            nus.v = nus.optionValueList
            nus.largeImageMode = false
            delete nus.optionValueList
            this.sku.tree.push(nus)
          });
          // console.log(this.sku);
        }
      });
    },
    // 添加购物车
    onAddCartClicked(obj) {
      if (!this.$store.state.user) {
        this.$toast.fail("你还未登录，请先登录");
        this.$router.replace("/Login");
        return
      }
      let orderItem = {}
      console.log(obj);
      if (obj.selectedSkuComb) {
        orderItem = { "userId": this.$store.state.user.id, "productId": obj.goodsId, "quantity": obj.selectedNum, "skuId": obj.selectedSkuComb.id, "jsonData": obj.selectedSkuComb.skuJson, "optionValueKeyGroup": obj.selectedSkuComb.s1 + '_' + obj.selectedSkuComb.s2 }
      } else {
        orderItem = { "userId": this.$store.state.user.id, "productId": obj.goodsId, "quantity": obj.selectedNum, "skuId": null, "jsonData": null, "optionValueKeyGroup": null }
      }
      this.$post(this.url2 + "/cart/addCart", {
        orderItem,
        "userId": this.$store.state.user.id
      }).then(res => {
        if (res.errorCode == '0') {
          this.$toast("添加购物车成功")
        }
      })
    },
    // 立即购买
    onBuyClicked(obj) {
      if (!this.$store.state.user) {
        this.$toast.fail("你还未登录，请先登录");
        this.$router.replace("/Login");
        return
      }
      console.log(obj);
      this.onAddCartClicked(obj);
      // this.$dialog({message:""})
      // this.Sto.Session.set("goods", obj)
      this.$router.push("/cart")
      // this.Sto.Session.remove("orderNum")
    },

    // 收藏
    shouchang() {
      if (!this.$store.state.user) {
        this.$toast.fail("你还未登录，请先登录");
        this.$router.replace("/Login");
        return
      }
      this.$post(this.url + "user/add/wishlist", {
        userId: this.$store.state.user.id,
        productId: this.productId,
      }).then((res) => {
        if (res.errorCode == "0") {
          this.$notify({ type: "success", message: "收藏成功" });
          this.get();
        }
      });
    },
    // 添加足迹
    getzuji() {
      this.$post(this.url2 + "/insertFoot", {
        userId: this.$store.state.user.id,
        productId: this.productId
      }).then(res => {
        if (res.errorCode == '0') {
          console.log("添加足迹成功");
        }
      })
    },
    getpl() {
      this.$post(this.url + "catalog/product/reviews",{
        productId:this.productId
      }).then(res=>{
        if(res.errorCode=='0'){
          
        }
      })
    }
  },
};
</script>

<style  scoped>
.custom-indicator {
  position: abs
.custom-indicator {
  position: absolute;
  right: 5px;
  bottom: 5px;
  padding: 2px 5px;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.1);
}
.top {
  display: flex;
  text-align: center;
  position: absolute;
  right: 0px;
  top: 0px;
  font-size: 8px;
  z-index: 1;
}
.top > div {
  margin: 0 0.2rem;
  line-height: 15px;
}
